<template>
    <div id="optlog-list">
        <div class="filter">
            <el-form :inline="true" :model="filter" ref="filter">
                <el-form-item label="操作模块" prop="modelName">
                    <el-input v-model="filter.modelName" placeholder="请输入操作模块名称"></el-input>
                </el-form-item>
                <el-form-item label="操作账号" prop="loginName">
                    <el-input v-model="filter.loginName" placeholder="请输入操作账号"></el-input>
                </el-form-item>
                <el-form-item label="操作状态"  prop="status">
                    <el-select v-model="filter.status" placeholder="请选择操作状态">
                        <el-option v-for="(value,key) in initData" :label="key" :value="value" :key="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作时间" prop="timeRange">
                    <el-date-picker
                        v-model="filter.timeRange"
                        type="daterange"
                        format="yyyy.MM.dd"
                        value-format="yyyy-MM-dd"
                        align="right"
                        unlink-panels
                        clearable
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        range-separator="至"
                        :default-time="[nowTime,nowTime]"
                        :picker-options="pickerOptions"
                        @change="checkDate"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="filter-button">
                    <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
                    <el-button type="primary" size="small" @click="resetFilter">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="list">
            <div class="button-bar">
                <el-button class="btn" type="primary" size="mini" icon="el-icon-download" @click="onExport" v-buttonPms="['log','opt','export']">导出</el-button>
            </div>
            <div class="data">
                <el-table :data="listData.data" ref="listData"  stripe @select-all="onSelectAll" @select="onSelect">
                    <!-- <el-table-column type="selection"  align="center"  align="center" width="50" ></el-table-column> -->
                    <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                        <div slot-scope="scope">
                            {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                        </div>
                    </el-table-column>
                    <el-table-column label="操作账号" prop="loginName" align="center" width="" ></el-table-column>
                    <el-table-column label="操作模块" prop="modelName"   align="center" width=""></el-table-column>
                    <el-table-column label="IP" prop="ip"   align="center" width=""></el-table-column>
                    <el-table-column label="地理位置" prop="address"   align="center" width=""></el-table-column>
                    <el-table-column label="操作状态" prop="status"   align="center" width=""></el-table-column>
                    <el-table-column label="操作时间" prop="createDate"  align="center"  width=""></el-table-column>
                    <el-table-column label="操作" prop="opt" width>
                        <slot slot-scope="scope">
                            <el-button size="mini" @click="showDetails(scope)">查看</el-button>
                        </slot>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next" 
                :current-page="listData.pageNum"
                :page-size="listData.pageSize"
                :total="listData.total" 
                @current-change="getList"
                @prev-click="getList"
                @next-click="getList"
            ></el-pagination>
        </div>
        <el-dialog title="操作日志详情" :visible.sync="showDialog">
            <detail @closeDialog="closeDialog" :initData="detailData" ></detail>
        </el-dialog>
    </div>
</template>
<script>
import detail from './opt-detail.vue'
export default {
    props:["initData"],
    components:{detail},
    data(){
        return{
            filter: {
                loginName:'',
                module:'',
                status:'',
                timeRange:'',
            },
            listData:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[]
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            checked:[],
            showDialog:false,
            detailData:'',
            tbHeader:[
                {
                    title:'操作账号',
                    key:'loginName'
                },
                {
                    title:'系统模块',
                    key:'modelName'
                },
                {
                    title:'IP',
                    key:'ip'
                },
                {
                    title:'地理位置',
                    key:'address'
                },
                {
                    title:'操作状态',
                    key:'status'
                },
                {
                    title:'操作时间',
                    key:'createDate'
                },
                {
                    title:'请求地址',
                    key:'requestUrl'
                },
            ]

        }
    },
    computed:{
        nowTime(){
            var date=new Date()
            var HH=date.getHours()
            var mm=date.getMinutes()
            var ss=date.getSeconds()
            return HH+":"+mm+":"+ss
        }
    },
    methods:{
        getList(pageNum){
            var submitData={
                current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
                size:this.listData.pageSize,
                ...this.filter,
            };
            
            submitData.startTime=submitData.timeRange && submitData.timeRange[0]
            submitData.endTime=submitData.timeRange && submitData.timeRange[1]
            delete submitData.timeRange
            if(submitData.startTime && submitData.startTime===submitData.endTime){
                this.$message.warning("开始时间不能等于结束时间!")
                return
            }
            this.$http.getOptLogList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                this.$set(this.listData,'pageNum',data.current || this.listData.pageNum);
                this.$set(this.listData,'pageSize',data.size || this.listData.pageSize);
                this.$set(this.listData,'total',data.total );

                let newData=this.transData(data.records);
                this.$set(this.listData,'data',newData)

            }).catch((err)=>{
                window.message.close()
                if(err.data && err.data.message){
                    
                }else{
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,查询失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },

         //全选
        onSelectAll(selection){
            this.checked=selection
        },
        //选择
        onSelect(selection,row){
            this.checked=selection
        },

        showDetails(rowData){
            this.showDialog=true
            var _this=this
            this.$nextTick(()=>{
                _this.detailData=rowData.row
            })
        },

        closeDialog(){
            this.showDialog=false
        },
       
         //数据转换
        transData(data){
            if(!data){return data}
            var newData=data.map((item)=>{
                for(var key in this.initData){
                    if(item.status===this.initData[key]){
                        item.status=key
                    }
                }
                return item
            })
            return newData
        },

        resetFilter(){
            this.$refs.filter.resetFields()
            this.getList()
        },

        checkDate(value){
            if(value[0] && value[0]===value[1]){
                this.$message.warning("开始时间不能等于结束时间!")
                return false
            }
        },

         // 导出
        onExport(){
            var submitData={
                current:1,
                size:this.listData.total,
                ...this.filter,
            };
            submitData.startTime=submitData.timeRange && submitData.timeRange[0]
            submitData.endTime=submitData.timeRange && submitData.timeRange[1]
            delete submitData.timeRange
            this.$http.getOptLogList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data){
                    this.$message.error("数据异常!")
                    return
                }
                let newData=this.transData(data.records);
                this.export2Excel(this.tbHeader,newData)

            }).catch((err)=>{
                window.message.close()
                if(err.data && err.data.message){
                    
                }else{
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,操作失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })
        },

        //导出json数据为excel
        export2Excel(tbHeader,list){
            const {export_json_to_excel} = require('@/assets/lib/excel/Export2Excel');
            let tHeader = []
            let filterVal = []
            tbHeader.forEach(item =>{
                tHeader.push(item.title)
                filterVal.push(item.key)
            })
            const data = list.map(v => filterVal.map(j => v[j]))
            export_json_to_excel(tHeader, data, '操作日志列表');
        }

    },
    created(){
        this.getList()
    }


}
</script>
<style lang="scss" scoped>
#optlog-list{
    height: 100%;
    display: flex;
    flex-direction:column;
}

.filter{
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    /deep/ .el-form{
        flex-wrap:wrap;
        .el-form-item{
            flex:30%;
            margin:5px;
             .el-input__inner{
                height:35px;
                line-height:35px;
            }
        }
    }

}
.list{
    margin: 10px;
    margin-top: 0px;
    border:1px solid #eee;
    border-radius: 10px;
    flex:1;
    display: flex;
    flex-direction:column;
    .button-bar{
        width: 100%;
        .btn{
            margin: 10px;
        }
    }
    .data{
        flex: 1;
        overflow: auto;
    }
}

/deep/ .el-dialog{
    display: flex;
    flex-direction: column;
    .el-dialog__body{
        flex:1;
        overflow: auto;
    }
}
</style>
<style scoped lang="scss">
.tree-dialog .button-bar{
    text-align: center;
    margin-top: 20px;
    .el-button{
        margin:0px 10px;
    }
}


</style>


